import getActivityName from '@/utils/getActivityName'
import { Button, Form, Input, NavBar, Toast } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useHistory, useParams } from 'umi'
import './activityDetail.less'

export default function ActivityDetail() {
  const [activity, setActivity] = useState({})
  const params: { id: string } = useParams()
  let userInfo = sessionStorage.getItem('userInfo')
  userInfo = userInfo ? JSON.parse(userInfo) : {}
  const history = useHistory()
  useEffect(() => {
    fetch("/admin/base/activityManage/info", {
      method: "POST",
      body: JSON.stringify({ id: params.id }),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => res.json()).then(res => {
      console.log(res);
      setActivity(res.data)
    })
  }, [])
  const goback = () => {
    history.goBack()
  }
  const activitySingup = (values: any) => {
    const data = { ...values, activityId: params.id, userId: userInfo.id }
    fetch("/app/base/activitySignup/add", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => res.json()).then(res => {
      Toast.show({
        content:"报名成功"
      })
      history.push('/singupActivity')
    })
  }
  return (
    <div className='activityDetail'>
      <NavBar onBack={goback}>活动详情</NavBar>
      <div className='activity-box'>
        <div className='activity-content'>
          <img className='activity-img' src={activity.activityImg} alt="" />
          <div className='activity-title'>
            <div>{activity.activityName}</div>
            <div>{getActivityName(activity.activityStatus)}</div>
          </div>
          <Form layout='horizontal' onFinish={activitySingup}>
            <Form.Item rules={[{
              required: true,
              message: '请输入姓名'
            }]} name='name' label='姓名'>
              <Input placeholder='请输入姓名'></Input>
            </Form.Item>
            <Form.Item rules={[{
              pattern: /^1[3456789]\d{9}$/,
              required: true,
              message: '请输入手机号'
            }]} name='phone' label='手机号'>
              <Input placeholder='请输入手机号'></Input>
            </Form.Item>
            <Form.Item name='wx' label='微信号'>
              <Input placeholder='请输入微信号'></Input>
            </Form.Item>
            <Form.Item name='address' label='所在地址'>
              <Input placeholder='请输入所在地址'></Input>
            </Form.Item>
            <Form.Item label='主办方'>
              {activity.business}
            </Form.Item>
            <Button className='submit-btn' type='submit'>报名</Button>
          </Form>
        </div>
      </div>
      <div className='activity-box'>
        <div className='activity-content'>{activity.activityDesc}</div>
      </div>
      <div className='empty'></div>
    </div>
  )
}
